/*
 *     左右面板切换
 *     1. 先导入gsap
 *     2. 先定义好两个面板的初始位置
 *     3. 定义动画
 *     4. 定义动画的触发条件
 *     5. 定义动画的触发方式
 *     6. 定义动画的触发时机
 * */

import { sleep } from '@/utils/sleep.js'
import gsap from 'gsap'

/**
 * 左右面板切换类
 */
class PanelToggle {
  /**
   * 显示面板左右面板
   * @async
   */
  async showPanel() {
    gsap.to('.right-panel', {
      x: '100%',
      duration: 0,
      ease: 'power1.inOut'
    })
    gsap.to('.left-panel', {
      x: '-120%',
      duration: 0,
      ease: 'power1.inOut'
    })
    await sleep(0)
    gsap.to('.left-panel', {
      x: 0,
      duration: 0.8,
      ease: 'power1.inOut'
    })
    gsap.to('.right-panel', {
      x: 0,
      duration: 0.8,
      ease: 'power1.inOut'
    })
  }

  /**
   * 隐藏面板左右面板
   * @async
   */
  async hidePanel() {
    gsap.to('.right-panel', {
      x: '130%',
      duration: 0.8,
      ease: 'power1.inOut'
    })
    gsap.to('.left-panel', {
      x: '-130%',
      duration: 0.8,
      ease: 'power1.inOut'
    })
    await sleep(650)
    gsap.to('.left-panel', {
      x: 0,
      duration: 0,
      ease: 'power1.inOut'
    })
    gsap.to('.right-panel', {
      x: 0,
      duration: 0,
      ease: 'power1.inOut'
    })
  }

  /**初始化
   *
   */

}

// 创建一个实例并导出
const panelToggle = new PanelToggle()
export { panelToggle }
